<template>
  <div>
    <QueryForm
      v-model="filters"
      :query-form-config="queryFormConfig"
      @handleQuery="getActivtyList(1)"
      @clear="clear"
    />
    <div v-if="meta.indexOf('AddLuckdrawAcyivity') > -1" class="doumee_table_header">
      <el-button v-preventReClick type="primary" @click="addActivty">{{ $t('message.add') }}</el-button>
    </div>
    <el-table
      ref="table"
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      :header-row-class-name="'table-header'"
      class="doumee-element-tableb"
    >
      <el-table-column align="center" :label="$t('message.cjmc')" min-width="140" prop="name" show-overflow-tooltip />
      <el-table-column
        align="center"
        :label="$t('message.hdhb')"
        width="120"
        prop="poster"
      >
        <template slot-scope="scope">
          <el-image
            style="width: 40px;"
            fit="contain"
            :src="scope.row.showPic"
            :preview-src-list="[scope.row.showPic]"
          />
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        :label="$t('message.hdkssj')"
        min-width="140"
        prop="beginDate"
      />
      <el-table-column
        align="center"
        :label="$t('message.hdjssj')"
        min-width="140"
        prop="endDate"
      />
      <el-table-column
        align="center"
        :label="$t('message.hdsj')"
        min-width="140"
      >
        <template slot-scope="scope">
          {{ scope.row.beginTime }} - {{ scope.row.endTime }}
        </template>
      </el-table-column>
      <el-table-column align="center" :label="$t('message.status')" fixed="right" prop="status" min-width="80">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.state"
            v-preventReClick
            :disabled="meta.indexOf('UpdateAcyivityStatus') === -1"
            active-value="1"
            inactive-value="0"
            @change="stateChange(scope.row)"
          />
        </template>
      </el-table-column>
      <el-table-column :label="$t('message.caozuo')" min-width="200" align="center" fixed="right">
        <template slot-scope="scope">
          <div v-if="scope.row.state==0" class="flex-cc">
            <el-button v-if="meta.indexOf('UpdateLuckdrawAcyivity') > -1" v-preventReClick type="text" @click="toEdit(scope.row.id)">{{ $t('message.edit') }}</el-button>
            <el-button
              v-if="meta.indexOf('DeletedLuckdrawAcyivity') > -1"
              v-preventReClick
              class="secondColor"
              type="text"
              @click="activityRemove(scope.row.id)"
            >{{ $t('message.del') }}</el-button>
            <el-button
              v-if="meta.indexOf('GetLuckdrawPrizeList') > -1"
              v-preventReClick
              type="text"
              @click="showPrize(scope.row)"
            >{{ $t('message.hdjp') }}</el-button>
          </div>
          <div v-else>
            <el-button
              v-if="meta.indexOf('GetLuckdrawPrizeList') > -1"
              v-preventReClick
              type="text"
              @click="showPrize(scope.row)"
            >{{ $t('message.hdjp') }}</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <Pagination
      :total="totalCount"
      :page="pagination.page"
      @current-change="getActivtyList"
      @SizeChange="handleSizeChange"
    />
    <AddLuckdraw ref="addLuckdraw" @success="addSuccess" />
  </div>
</template>

<script>
import {
  getLuckdrawAcyivityList,
  deletedLuckdrawAcyivity,
  // updateLuckdrawAcyivity,
  statusUpdate
} from '@/api'
import AddLuckdraw from '@/components/addLuckdraw'
import { parseTime } from '@/utils'
import Pagination from '@/components/paginations'
import QueryForm from '@/components/QueryForm'
export default {
  name: 'LuckDrawACManager',
  components: {
    AddLuckdraw,
    QueryForm,
    Pagination
  },
  props: {
    meta: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      list: [],
      queryFormConfig: {
        formItems: [{
          filed: 'name',
          type: 'input',
          label: this.$t('message.hdname'),
          clearable: true
        }, {
          filed: 'sponsor',
          type: 'input',
          label: this.$t('message.zbf'),
          clearable: true
        }, {
          filed: 'status',
          type: 'select',
          label: this.$t('message.status'),
          clearable: true,
          options: [
            { value: '0', label: this.$t('message.gb') },
            { value: '1', label: this.$t('message.kq') }
          ]
        }, {
          filed: 'time',
          type: 'daterange',
          label: this.$t('message.xzrq'),
          clearable: true
        }],
        online: true
      },
      totalCount: 0,
      listLoading: false,
      activityTimeEdit: true,
      showMotifyTime: false,
      activityInfo: {
        id: '',
        status: '',
        startTime: '',
        endTime: '',
        applyEndTime: ''
      },
      filters: {
        time: []
      },
      pagination: {
        page: 1,
        rows: 10
      },
      pickerOptions: {
        disabledDate(time) {
          return (
            time.getTime() < new Date(new Date().toLocaleDateString()).getTime()
          )
        }
      }
    }
  },
  created() {
    this.getActivtyList(1)
  },
  activated() {
    this.$refs.table.doLayout()
  },
  methods: {
    /**
     * @选择活动时间范围
     * @param {*} v
    */
    // selectDate(v) {
    //   this.filters.beginDate = v[0]
    //   this.filters.endDate = v[1]
    // },
    /**
     * @清除筛选内容
     */
    clear() {
      this.filters = {
        time: []
      }
      this.getActivtyList(1)
    },
    /**
     * @获取活动列表
     */
    handleSizeChange(value) {
      this.pagination.rows = value
      this.getActivtyList(1)
    },
    addSuccess() {
      setTimeout(() => {
        this.getActivtyList(1)
      }, 1000)
    },
    getActivtyList(page) {
      const { filters, pagination } = this
      if (filters.time && filters.time.length > 0) {
        filters.beginDate = filters.time[0]
        filters.endDate = filters.time[1]
      } else {
        filters.beginDate = null
        filters.endDate = null
      }
      if (page) {
        pagination.page = page
        this.pagination.page = Number(page)
      }
      pagination.firstQueryTime = parseTime(new Date())
      this.listLoading = true
      getLuckdrawAcyivityList({
        pagination,
        param: {
          venueId: sessionStorage.getItem('venueId'),
          ...filters
        }
      })
        .then((res) => {
          this.listLoading = false
          if (res.errorCode === '000000') {
            this.list = res.recordList
            this.totalCount = res.totalCount
            if (res.totalCount && res.recordList.length === 0 && pagination.page > 1) {
              this.getActivtyList(Math.ceil(res.totalCount / pagination.rows))
            }
          }
        })
        .catch(() => {
          this.listLoading = false
        })
    },
    /**
     * @新增活动
     */
    addActivty() {
      this.$refs.addLuckdraw.open()
    },
    // 编辑
    toEdit(id) {
      this.$refs.addLuckdraw.open(id)
    },
    /**
     * @切换活动状态
     * @param {*} v
     */
    stateChange(v) {
      const obj = {
        id: v.id,
        state: v.state
      }
      // const arr = this.list
      statusUpdate({ param: obj })
        .then(res => {
          if (res.errorCode === '000000') {
            if (obj.state === '0') {
              this.$message.success(this.$t('message.jycg'))
            } else {
              this.$message.success(this.$t('message.qycg'))
            }
            this.getActivtyList()
          }
        }).catch(() => {
          this.getActivtyList()
        })
    },
    /**
     * @删除活动
     * @param {活动id} id
     */
    activityRemove(id) {
      const that = this
      this.$confirm(this.$t('message.schdtcqr'), this.$t('message.ts'), {
        confirmButtonText: this.$t('message.qd'),
        cancelButtonText: this.$t('message.qx'),
        type: 'warning',
        callback: () => {},
        beforeClose: (action, ctx, close) => {
          if (action !== 'confirm') {
            close()
            return
          }
          ctx.confirmButtonLoading = true
          deletedLuckdrawAcyivity({ param: { id }}).then((res) => {
            ctx.confirmButtonLoading = false
            close()
            if (res.errorCode === '000000') {
              that.$message.success(this.$t('message.delcg'))
              that.getActivtyList()
            }
          })
            .catch(() => { ctx.confirmButtonLoading = false })
        }
      }).finally(() => {})
    },
    showPrize(row) {
      this.$router.push({
        name: 'LuckdrawPrizeList',
        query: {
          id: row.id
        }
      })
    }
  }
}
</script>
